<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挥发油数据库检索系统</title>
    <script src="js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="js/index.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/icon.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet"  href="css/test.css">

</head>
<body>
<div id="app">
    <template >
        <el-descriptions class="margin-top" title="挥发油基本信息" :column="4"  v-show="show1"   border >
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content" >
                <template slot="label">
                    <i class="el-icon-user"></i>
                    挥发油中文名
                </template>
                {{tableData.oilChineseName}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    挥发油英文名
                </template>
                {{tableData.oilEnglishName}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    类别
                </template>
                {{tableData.type}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    来源中药
                </template>
                {{tableData.origin}}
            </el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 100px">
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    药理作用
                </template>
                {{tableData.efficacy}}
            </el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 100px">
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    药理作用（参考文献）
                </template>
                 {{tableData.edoc}}
            </el-descriptions-item>

        </el-descriptions>


        <el-descriptions class="margin-top" title="挥发油物理信息" :column="3" :size="size" border v-show="show1">
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                <template slot="label">
                    <i class="el-icon-user"></i>
                    相对密度/g∙cm-3
                </template>
                {{tableData.relativeDensity}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    比旋度
                </template>
                {{tableData.specificRoation}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    折光率
                </template>
                {{tableData.refractiveIndex}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    熔点/ °C
                </template>
                {{tableData.meltingPoint}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    沸点
                </template>
                {{tableData.boiling}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    挥发性参数/mg∙h-1∙cm-2
                </template>
                {{tableData.volatile}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    参考文献
                </template>
                {{tableData.pdocument}}
            </el-descriptions-item>
        </el-descriptions>



        <el-descriptions class="margin-top" title="挥发油毒性信息" :column="3" :size="size" v-show="show1" border>
            <el-descriptions-item label-class-name="my-label1" content-class-name="my-content1">
                <template slot="label">
                    <i class="el-icon-user"></i>
                    毒性
                </template>
                {{tableData.toxic}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label1" content-class-name="my-content1">
            <template slot="label">
                <i class="el-icon-office-building"></i>
                参考文献
            </template>
            {{tableData.tdocument}}
            </el-descriptions-item>
        </el-descriptions>
    </template>

    <template >
        <el-descriptions class="margin-top" title="促透药物信息" :column="4" :size="size" v-show="show2" border style="width: 1520px">
<!--            <el-descriptions-item>-->
<!--                <template slot="label">-->
<!--                    <i class="el-icon-user"></i>-->
<!--                    结构式-->
<!--                </template>-->
<!--                <el-img  style="width: 170px; height: 170px"-->
<!--                         :src="getImgUrl1(tableData1.id)"-->
<!--                ></el-img>-->
<!--            </el-descriptions-item>-->
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    中文名
                </template>
                {{tableData1.chineseName}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    英文名
                </template>
                {{tableData1.englishName}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    别名
                </template>
                {{tableData1.diffName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    分类
                </template>
                {{tableData1.type}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    PubChem CID
                </template>
                {{tableData1.pubChemCID}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    分子式
                </template>
                {{tableData1.formula}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    分子量
                </template>
                {{tableData1.weight}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    XLogP3
                </template>
                {{tableData1.xlogP3}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    Canonical SMILES
                </template>
                {{tableData1.canonicalSMILES}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    Isomeric SMILES
                </template>
                {{tableData1.isomericSMILES}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    摩尔体积 MVol
                </template>
                {{tableData1.mvol}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    熔点（℃）
                </template>
                {{tableData1.meltingPoint}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                <template slot="label">
                    <i class="el-icon-user"></i>
                    溶解度参数(CED1/2)
                </template>
                {{tableData1.solubilityParameter}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    汉森溶解度参数(δD)
                </template>
                {{tableData1.hansenSolubilityParameterD}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    汉森溶解度参数(δH)
                </template>
                {{tableData1.hansenSolubilityParameterH}}
            </el-descriptions-item>

            <el-descriptions-item label-class-name="my-label">
                <template slot="label" >
                    <i class="el-icon-user"></i>
                    汉森溶解度参数(δP)
                </template>
                {{tableData1.hansenSolubilityParameterP}}
            </el-descriptions-item>




            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    氢键供体数目
                </template>
                {{tableData1.hydrogenBondAcceptorCount}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    氢键受体数目
                </template>
                {{tableData1.hydrogenBondDonorCount}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    拓扑极性表面积(Å²)
                </template>
                {{tableData1.topologicalPolarSurfaceArea}}
            </el-descriptions-item>
        </el-descriptions>
    </template>

</div>

</body>
<style>
    .my-label {
        background: #0AFFFF;
        width: 190px;
    }

    .my-content {
        width: 210px;
    }
    .my-label1 {
        background: #0AFFFF;
        width: 120px;
    }

    .my-content1 {
        width: 290px;
    }
</style>
<script>
    new Vue({
        el: '#app',
        data :{
            size:"",
            tableData:"",
            tableData1:"",
            id:10,
            show1:false,
            show2:false,
            word:""
        },
        methods: {
            findAll(){
                var _this = this;
                this.id=10;
               let geturl=window.location.href;
                let getqyinfo = geturl.split('?')[1]   //qycode=1001&qyname=%E4%BC%81%E4%B8%9A%E5%BF%99   截取到参数部分
                let getqys = new URLSearchParams('?'+getqyinfo)  //将参数放在URLSearchParams函数中
                let getqycode = getqys.get('name')   //1001
                let getid = getqys.get('id')   //1001
                this.word=getqycode;
                if(getid==1){
                    this.show1=true;
                    this.show2=false;
                    axios.get("http://localhost:8080/user/search?id="+this.id+"&word="+this.word).then(res=>{
                        _this.tableData=res.data.oil;
                        console.log(res.data.oil);
                    })
                }else {
                    this.show1=false;
                    this.show2=true;
                    this.id=4;
                    axios.get("http://localhost:8080/user/search?id="+this.id+"&word="+this.word).then(res=>{
                        this.tableData1=res.data.drugPromoteds[0];
                        console.log(this.tableData1);
                    })

                }


            },
            getImgUrl1 (img) {
                return "/img/drug/" + img+ ".jpg";
            },
        },
        created(){
            this.findAll();
        }

    })
</script>
</html>